<template>
  <div>
    <div class="headerSty1" style="margin: 20px 0 10px;">
      <div class="headerLeftSty">
        <div class="textSty">客户签章</div>
      </div>
      <div>
        <el-form label-width="160px">
          <el-row>
            <el-col :span="18">
              <el-form-item label-width="40px">
                <div class="headerLeftSty">
                  <div class="navSty"></div>
                  <div class="textSty1" style="margin-left: 10px;">项目负责人</div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="一级消防注册工程师">
                <div>{{ form.projectSaveDTO.engineerName }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="中级消防设施操作员">
                <div>{{ form.projectSaveDTO.operatorsName }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="批准人">
                <div>{{ form.approverName }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目负责人">
                <div>{{ form.projectSaveDTO.projectLeaderName }}</div>
              </el-form-item>
            </el-col>
            <!-- 合同生成 -->
            <el-col :span="18">
              <el-form-item label-width="40px">
                <div class="headerLeftSty">
                  <div class="navSty"></div>
                  <div class="textSty1" style="margin-left: 10px;color: rgb(90, 156, 248);">已生成方案
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="40px">
                <div class="rickSty">
                  <div v-html="textRich"></div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="40px">
                <!--  -->
                <el-button type="danger" @click="downloadContract" :loading="btnLoading">附件下载</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

  </div>
</template>
<script>
import { getUserListType, getTemplatePublicList, dowRichText, } from "@/api/contract/contractOrg"
import { blobValidate } from "@/utils/ruoyi";
import { saveAs } from 'file-saver'
export default {
  props: {
    dataForm: {
      type: Object,
      default: {},
    }
  },
  data() {
    return {
      form: {
        name: ''
      },
      // 表单校验
      rules: {},
      tableData: [],
      relOptions: [],
      relAOptions: [],
      relModelOptions: [],
      // 富文本
      textRich: '',
      btnLoading: false,
    }
  },
  created() {
    if (Object.keys(this.dataForm).length !== 0) {
      this.form = { ...this.form, ...this.dataForm, listName: this.dataForm.customerName }
      this.textRich = this.textRep(this.dataForm.programmeRichText)
    }
  },
  methods: {
    // 处理富文本
    textRep(text) {
      let updatedContent = text.replace(/<image (.*?)src="([^"]+)"(.*?)>/gi, (match, attrs, src, rest) => {
        // 检查src是否以http开头  
        if (!src.toLowerCase().startsWith('http://') && !src.toLowerCase().startsWith('https://')) {
          // 如果不是，则拼接新的src  
          const newSrc = `${process.env.VUE_APP_WEBSC_API}${src}`;
          // 返回替换后的完整标签  
          return `<image style="width: 100px; height: 60px;position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);opacity: 0.2;" ${attrs}src="${newSrc}"${rest}>`;
        } else {
          // 如果src以http开头，则不进行操作，直接返回原标签  
          return match;
        }
      });

      // 第二步：给所有<td>元素添加相对定位  
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = updatedContent;
      const tds = tempDiv.getElementsByTagName('td');
      for (let i = 0; i < tds.length; i++) {
        tds[i].style.position = 'relative';
      }
      // 获取处理后的HTML字符串  
      updatedContent = tempDiv.innerHTML;
      return updatedContent;
    },
    //判定
    getTypeOf() {
      if (typeof this.form.projectSaveDTO.operators === 'string') {
        this.form.projectSaveDTO.operators = this.form.projectSaveDTO.operators.split(',').map(Number);
      } else if (Array.isArray(this.form.projectSaveDTO.operators)) {
        this.form.projectSaveDTO.operators = this.form.projectSaveDTO.operators.filter(item => {
          return typeof item === 'number' || !isNaN(Number(item));
        });
      } else {
        // 可能需要设置一个默认值  
        this.form.projectSaveDTO.operators = [];
      }
    },
    // 下载合同
    downloadContract() {
      dowRichText({
        fileName: this.form.name,
        data: this.textRich
      }).then(async (data) => {
        const isBlob = blobValidate(data.data);
        const filename = decodeURIComponent(data.filename);
        if (isBlob) {
          saveAs(data.data, filename)
        } else {
          const resText = await data.text();
          const rspObj = JSON.parse(resText);
          const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
          Message.error(errMsg);
        }
      })
    },
    // 提交按钮确认
    submitConSignature() {
      // this.form.status = 5
      this.form.status = 6
      if (this.form.projectSaveDTO.operators) {
        this.form.projectSaveDTO.operators = this.form.projectSaveDTO.operators.join(',')
      } else {
        this.form.projectSaveDTO.operators = []
      }

      this.$nextTick(() => {
        this.$emit('refreshSignature', this.form)
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.headerSty {
  display: flex;
  justify-content: space-between;
  width: 97%;

  .headerLeftSty {
    display: flex;
    align-items: center;

    .textSty {
      margin-left: 8px;
      font-size: 16px;
      font-weight: 700;
    }


  }

}

.headerSty1 {
  width: 97%;

  .headerLeftSty {
    display: flex;
    align-items: center;

    .textSty1 {
      margin-left: 8px;
      font-size: 14px;
      font-weight: 700;
    }

    .textSty {
      margin-left: 8px;
      font-size: 16px;
      font-weight: 600;
    }
  }

}

.rickSty {
  border: 1px solid #999;
  height: 300px;
  overflow-y: auto;
}


.navSty {
  height: 15px;
  width: 5px;
  background: rgb(90, 156, 248);
}


.contSty {
  display: flex;

  .contLeftSty {
    height: 80px;
    width: 5px;
    background: rgb(90, 156, 248);
  }

  .allBlo {
    margin-left: 5px;
  }

  .LastBlockSty {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 132px;
    height: 30px;
    background: white;
    border-radius: 5px;
    color: rgb(90, 156, 248);
    border: 1px solid rgb(90, 156, 248);

    .el-icon-warning {
      color: rgb(90, 156, 248);
      font-weight: bolder;
      margin-right: 5px;
      font-size: 18px;
    }
  }

  .blockSty {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 132px;
    height: 30px;
    background: rgb(90, 156, 248);
    border-radius: 5px;
    color: white;

    .el-icon-check {
      color: white;
      font-weight: bolder;
      margin-right: 5px;
      font-size: 18px;
    }

    .el-icon-close {
      color: white;
      font-weight: bolder;
      margin-right: 5px;
      font-size: 18px;
    }
  }

  .lastTeSty {
    flex: 1;
    height: 120px;
    background: white;
    margin-left: 10px;
    border-radius: 5px;
    border: 1px solid rgb(90, 156, 248);
    overflow-y: auto;
  }
}

.text1 {
  font-size: 14px;
  font-weight: 500;
}

.text2 {
  font-size: 14px;
  color: #999;
}

.el-icon-arrow-right {
  color: rgb(90, 156, 248);
  font-weight: bolder;
  margin: 0 10px;
  font-size: 32px;
}
</style>